<template>
  <div class="data-info-setting">
    <a-form-item label="设置" :label-align="'left'" :label-col="{ span: 3 }">
      <div class="desensitization-set">
        <a-button
          v-if="availableConfigurationItems['desensitization']"
          class="data-setting-button"
          type="link"
          @click="onDataImportConfigSettingBtnClick"
        >
          <a-icon-font
            class="icon-font"
            type="iconzidingyi"
            style="color: #5561ff;"
          />
          <span>脱敏设置</span>
        </a-button>
        <a-button
          v-if="availableConfigurationItems['timing']"
          class="data-setting-button"
          type="link"
          @click="onDatabaseTimingSettingBtnClick"
        >
          <a-icon-font
            class="icon-font"
            type="iconzidingyi"
            style="color: #5561ff;"
          />
          <span>定时设置</span>
        </a-button>
        <a-checkbox
          v-if="availableConfigurationItems['typeInfer']"
          :checked="isDataTypeInfer"
          style="margin-left: 17px;"
          @change="changeTypeInfer"
        >
          推断类型
        </a-checkbox>
        <a-checkbox
          v-if="availableConfigurationItems['semanticInfer']"
          :checked="isDataSemanticInfer"
          @change="changeSemanticInfer"
        >
          推断语义
        </a-checkbox>
      </div>
    </a-form-item>
    <!-- 脱敏设置 -->
    <data-info-setting-modal
      :visible="desensitizationSettingModalVisible"
      :selected-data-type="selectedDataType"
      :selected-database-type="selectedDatabaseType"
      :selected-table-data="selectedTableData"
      :dataset-data="selectedDataType === 'graph' ? [] : datasetData"
      @confirm="confirmDesensitizationSetting"
      @cancel="desensitizationSettingModalVisible = false"
    />
    <!-- 定时设置 -->
    <timing-setting-modal
      :visible="timingSettingModalVisible"
      :selected-table-data="selectedTableData"
      :selected-database-type="selectedDatabaseType"
      @cancel="timingSettingModalVisible = false"
      @confirm="confirmTimingSetting"
    />
  </div>
</template>

<script lang="ts">
/**
 * 脱敏设置 component
 * @author Jinhui Hou
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import DataInfoSettingModal from '@/components/data/data-information/setting/DesensitizationSettingModal.vue'
import TimingSettingModal from '@/components/data/data-information/setting/TimingSettingModal.vue'
import DataUploadStore from '@/store/modules/data-upload'

@Component({
  components: {
    DataInfoSettingModal,
    TimingSettingModal,
  },
})
export default class DataInfoSetting extends Vue {
  @Prop({ type: Object }) availableConfigurationItems!: any // 显示的配置项
  @Prop({ type: String }) selectedDataType!: string // 数据类型
  @Prop({ type: String }) selectedDatabaseType!: string // 数据库类型
  @Prop({ type: String }) selectedTableData!: string // 选择的表

  public desensitizationSettingModalVisible: boolean = false // 脱敏设置弹框
  public timingSettingModalVisible: boolean = false // 定时配置弹框

  /**
   * 预览数据
   */
  public get datasetData() {
    return DataUploadStore.datasetData
  }

  // 是否应用推断类型
  public get isDataTypeInfer() {
    return DataUploadStore.isDataTypeInfer
  }
  // 是否应用推断语义
  public get isDataSemanticInfer() {
    return DataUploadStore.isDataSemanticInfer
  }
  // 脱敏配置
  public get haveSetDesensitization() {
    return DataUploadStore.haveSetDesensitization
  }

  /**
   * 切换是否应用 数据类型推断
   */
  public changeTypeInfer(event: any) {
    DataUploadStore.setIsDataTypeInfer(event.target.checked)
    this.$emit('toggle-type-semantic-infer', {
      type: 'type',
      value: event.target.checked,
    })
  }
  /**
   * 切换是否应用 语义类型推断
   */
  public changeSemanticInfer(event: any) {
    DataUploadStore.setIsDataSemanticInfer(event.target.checked)
    this.$emit('toggle-type-semantic-infer', {
      type: 'semantic',
      value: event.target.checked,
    })
  }

  /**
   * 外部数据库导入数据脱敏设置按钮点击事件
   */
  public async onDataImportConfigSettingBtnClick() {
    const dataLevelMaskingTypeExist: boolean = !(
      DataUploadStore.getListMaskingType.length > 0 &&
      DataUploadStore.getListDataLevel.length > 0
    )
    if (dataLevelMaskingTypeExist) {
      await DataUploadStore.queryListDataLevel()
      await DataUploadStore.queryListMaskingType()
    }
    this.desensitizationSettingModalVisible = true
  }

  /**
   * 数据库定时配置
   */
  public onDatabaseTimingSettingBtnClick() {
    this.timingSettingModalVisible = true
  }

  /**
   * 确认定时配置存储
   */
  public confirmTimingSetting(data: any) {
    DataUploadStore.setTimingSettingMaps(data.timing)
    this.timingSettingModalVisible = false
  }

  /**
   * 脱敏设置确认存储
   * @param data
   */
  public confirmDesensitizationSetting(data: any) {
    DataUploadStore.setHaveSetDesensitization(data.desensitization)
    this.desensitizationSettingModalVisible = false
    this.$emit('desensitization-setting') // 脱敏设置 confirm
    DataUploadStore.setIsConfigSubmit(false)
  }
}
</script>
<style lang="less" scoped>
.data-info-setting {
  width: 100%;

  /deep/ .ant-form-item {
    margin-bottom: 8px;
  }

  // 定死左侧 label 宽度
  /deep/ .ant-form-item-label-left {
    width: 110px;
  }
}
</style>
